<template>
    <scroll-view class="rx-scroll" scroll-y :scroll-top="scrollTop" @scroll="handleScroll">
    <div class="RxForm">
        <rx-bpm-head :data="data" v-if="data.ID_ && data.INST_ID_"></rx-bpm-head>
        <template v-for="(item,index) in template" :key="index">
            <rx-form-item :ref="item.key" :data="data" :read-only="readOnly" :item="item"></rx-form-item>
        </template>
    </div>
    </scroll-view>
</template>

<script>
import JsRxForm from "./js/JsRxForm"
import formula from "./js/formula"
import loopControl from "./js/loopControl";
import FormConstant from "../../../../js/FormConstant";
import RxBpmHead from "./RxBpmHead"
import Util from "@/js/Util.js";

export default {
    name: "RxForm",
    mixins: [JsRxForm, formula],
    emits:['dataChange'],
    props: {
        /**
         * JS脚本对象.
         */
        formJs: {
            type: Object
        },
        /**
         * 通过方案返回的数据.
         * 1.data 数据
         * 2.metadata:表单元数据
         * 3.template 手机表单模板.
         * 4.permission:表单权限.
         */
        resForm: {
            type: Object
        },
        /**
         * 上下文数据.
         */
        contextData:{
            type: Object
        },
        /**
         * 动作 edit,detail, {} []
         */
        action:{},
        openReadonly:{},
      //回填传入的参数
      backfillParams:{
        type:Object
      }
    },
    provide(){
        return {
            /**
             *表单实例对象.
             */
            formVm:this,
            //注入上下文
            contextData:this.contextData,
        }
    },
    components: {
        RxBpmHead
    },
    computed:{
        readOnly(){
            if(this.openReadonly){
                return this.openReadonly ;
            }
            return this.action === FormConstant.ACTION_DETAIL;
        }
    },
    data() {
        return {
            //自定义查询
            customQuery: {},
            //公式
            formulas: {},
            //表单全部数据
            data:{},
            //pc端控件配置拿出来
            pcSelect: {},
            //移动端的配置
            template: [],
            ...this.formJs.data(),
            //筛选好的控件数据全部控件拿出来
            metadataMobile: [],
            //表单全部权限
            permission: {},
            /**
             * 字段值来源缓存
             * {key:{
             *  options:[],//选项
             *  load:true,//加载情况 true为加载中或加载完 false为加载失败
             *  }
             * }}
             */
            fieldSourceCache: {},
            scriptShow: true,
            //意见可写配置.
            opinionSetting:[],
            scrollTop: 0,
        }
    },
    created() {
        //pc表单数据
        let metadataOBJ = JSON.parse(this.resForm.metadata);
        this.setMobileSelect(metadataOBJ);
        //移动表单数据
        if(!this.resForm.template){
            return
        }
        this.template = JSON.parse(this.resForm.template);
        this.permission = this.resForm.permission;
        this.opinionSetting = this.resForm.opinionSetting;
        //替换移动端数据
        this.getInit();
        this.metadataMobile = this.getContainer(this.template);
        //初始化数据，获取customQuery:{},自定义查询formulas:{},//公式
        this.setSubOneTableData() ;
        this.initFormConfig(()=>{
            if(this.resForm.data){
                this.data = this.resForm.data ;
            }
        });
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formSolutionLang",key);
        },
        setSubOneTableData(){
            let { data } = this.resForm ;
            for (let key in data){
                if(key.includes('sub__') && Object.prototype.toString.call(data[key]) === '[object Object]'){
                    this.data[key] = {};
                }
            }
        },
        init() {
            //绑定方法
            if (this.formJs.methods) {
                for (let method in this.formJs.methods) {
                    this[method] = this.formJs.methods[method];
                }
            }
            //定义监听
            if (this.formJs.watch) {
                for (let watch in this.formJs.watch) {
                    let json = this.formJs.watch[watch];
                    if (typeof json == "function") {
                        this.$watch(watch, json);
                    } else {
                        let handler = json.handler;
                        delete json.handler;
                        this.$watch(watch, handler, json);
                    }
                }
            }
            //加载方法
            if (this.formJs.created) {
                this.formJs.created.apply(this);
            }
            if (this.formJs.mounted) {
                this.formJs.mounted.apply(this);
            }
            this.data = {...this.data,...this.backfillParams}
        },
        dataValue(item) {
            if (item.type == FormConstant.SubTable) {
                return this.data[FormConstant.SubPrefix + item.key]
            } else {
                return this.data[item.key]
            }
        },
        /**
         * 获取一对一子表的字段组件
         * @param config 一对一的配置
         * @returns {*[]}
         */
        getOneTableConfig(config) {
            let ary = [];
            let loopCtl = (config) => {
                loopControl(config, (item) => {
                    ary.push(item);
                })
            }
            config.children.forEach(col => {
                if (col.children) {
                    loopCtl(col.children)
                }
            })
            return ary;
        },
        getData() {
            let rtn = {};
            let formData = this.resForm;
            let _type = formData.type
            let alias = formData.alias;
            rtn[alias] = this.data;
            return rtn;
        },
        /**
         * 获取意见字段名称.
         * @returns {string}
         */
        getOpinionName() {
            let opinionName = "";
            if(!this.opinionSetting){
                return opinionName;
            }
            for (let j = 0; j < this.opinionSetting.length; j++) {
                if (this.opinionSetting[j].setOpinion) {
                    opinionName = this.opinionSetting[j].name;
                    break;
                }
            }
            return opinionName;
        },
        handleScroll:Util.debounce(function (e){
            this.scrollTop = e.detail.scrollTop;
        },300)
    },
    watch: {
        data: {
            handler(v) {
                console.info('全部数据====', v)
                this.dataChange(v)
            },
            deep: true,
            immediate: true
        },
    }
}
</script>

<style scoped>
.rx-scroll{
    height: 100%;
}
</style>
